<div id="tab-sheet">
    <div class="tab-header">
        <div class="tab-list">
            <div class="tab-item">
                <div class="mask-list" :style="{'padding-left': paddLeft}">
                    <div
                            class="mark-item"
                            v-show="tabs[index].show"
                            v-for="(item, index) in tabs"
                            :key="index"
                            @click="toggleCheck(index)">
                        <div :class="cursor === index? 'mark-dot dot-active' : 'mark-dot'"></div>
                        <div class="mark-line" v-show="index < tabs.length - 1"></div>
                        <div :class="cursor === index? 'text-item text-active' : 'text-item'">{{ item.content }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-btn">
            <el-button style="margin-right: 10px;" v-show="show" v-permission="item.auth? item.auth : []" :type="item.type" size="mini" :icon="item.icon" v-for="(item, index) in rightBtns" :key="index" plain @click="triggerClick(item.tap)">{{item.text}}</el-button>
        </div>
    </div>
    <div class="sheet-list" ref="sheetList" @scroll="listenScroll($event)">
        <slot></slot>
    </div>
</div>
